<template>
	<div id="Home">
		<nav-bar class="home-nav">
			<div slot="center">
				购物街
			</div>
		</nav-bar>
		<swiper>
			<swiper-item v-for="(item,index) in bannerList" :key=item.title>
				<a href="#" v-if="index == 1">
					<img src="../../assets/img/swiper/lbt1.png">
				</a>
				<a href="#" v-else-if="index == 2">
					<img src="../../assets/img/swiper/lbt2.png">
				</a>
				<a href="#" v-else-if="index == 3">
					<img src="../../assets/img/swiper/lbt3.png">
				</a>
				<a href="#" v-else>
					<img src="../../assets/img/swiper/lbt4.png">
				</a>
			</swiper-item>
		</swiper>
		<home-recommend-view></home-recommend-view><!-- 抢购 -->
		<work-fash></work-fash><!-- 本周流行 -->
		<fashion :titles="['流行','精选','新款']" class="tab-control" @click="tabClick()"></fashion>
		<goods :goods="goods[currentType].list"></goods>
		<back-top></back-top>
		<div id="select" @click="clickDetial()">
			<div class="style">
				<img src="../../assets/img/common/sp5.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp3.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp6.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp1.png">
				<p>凳子</p>
				<span>￥9.9 123人喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp3.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp3.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp4.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp5.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp6.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp7.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp8.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp10.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp11.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp12.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp5.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp6.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp2.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp9.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp10.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp11.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp12.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp5.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/sp6.png">
				<p>拖鞋</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
			</div>
			<div class="style">
				<img src="../../assets/img/common/yx1.png">
				<p>照片1</p>
				<span>123r喜欢<img src="../../assets/img/common/sc.png"></span>
				<ul>
					<li>加载更多.....</li>
				</ul>
			</div>
		</div>
		
	</div>

</template>
<script>
	import NavBar from '../../components/common/navbar/NavBar.vue'
	import HomeRecommendView from './childComps/HomeRecommendView.vue'
	import WorkFash from '../../components/conent/WrokFash.vue'
	import Fashion from '../../components/conent/Fashion.vue'
	import Goods from '../../components/conent/good/Goods.vue'
	import BackTop from '../../components/conent/BackTop.vue'

	import {
		getHomeMulitidata,
		getHomeGoods
	} from '../../network/home.js'
	//如果没有index.js文件我们需要这样导入
	/* import Swiper from '../../components/common/swiper/Swiper.vue'
	import SwiperItem from '../../components/common/swiper/SwiperItem.vue' */
	//但是有这个文件我们只需要这样导入就行
	import {
		Swiper,
		SwiperItem
	} from '../../components/common/swiper'
	export default {
		name: "Home",
		components: {
			NavBar,
			Swiper,
			SwiperItem,
			HomeRecommendView,
			WorkFash,
			Fashion,
			Goods,
			BackTop
	
		},
		data() {
			return {
				navData: null, //保存所有的数据
				banners: [],
				recommends: [],
				goods: {
					'pop': {
						page: 0,
						list: []
					},
					'news': {
						page: 0,
						list: []
					},
					'sell': {
						page: 0,
						list: []
					}
				},
				currentType: 'pop',
				num: 0,
				timer: null,
				bannerList: [
					"../../assets/img/swiper/lbt1.png",
					"../../assets/img/swiper/lbt2.png",
					"../../assets/img/swiper/lbt3.png",
					"../../assets/img/swiper/lbt4.png"
				],
				saveY:0
			}
		},
		created() {
			//请求多个数据
			this.getHomeMulitidata()
			//请求商品数据
			this.getHomeGoods('pop')
			this.getHomeGoods('news')
			this.getHomeGoods('sell')
		},
		methods: {
			//事件监听相关的方法
			tabClick(index) { //点击谁就请求谁的数据
				switch (index) {
					case 0:
						this.currentType = 'pop';
						break;
					case 1:
						this.currentType = 'new';
						break;
					case 2:
						this.currentType = 'sell';
						break;
				}
			},
			//网络请求相关的方法
			getHomeMulitidata() {
				getHomeMulitidata().then(res => {
					this.navData = res; //请求到的数据是轮播图的数据  在首页
					this.banners = res.data.banner;
					this.recommends = res.data.recommend;
				})
			},
			getHomeGoods(type) {
				/* 这里我们请求到的数据是流行界面的数据 */
				const page = this.goods[type].page + 1
				getHomeGoods('pop', page).then(res => {
					this.goods[type].list.push(...res.data.list)
					this.goods[type].page + 1
					/* 合并两个数组用es6新属性 扩展运算符... */
				})
			},
			clickDetial(){//点击跳转到详情页
				this.$router.push('/detail')
			},
			activated(){
				console.log('home enter')
			},
			deactivated(){
				//记录离开时的位置
				this.saveY = this.$refs.scroll._scroll.y
				console.log('home leave')
			}
		}
	}
</script>

<style scoped>
	.home-nav {
		background-color: #F4A460;
		color: beige;
	}

	#nav {
		height: 200px;
		background-color: #000000;
	}

	.tab-control {
		position: sticky;
		/* 实现鼠标悬停效果 */
	}
	.style span img{
		padding-left: 10px;
		width: 30px;
		height: 30px;
		
	}
	.style{
		text-align: center;
		float: left;
		margin-left: 5px;
	}
	.style span{
		color: red;
		padding-top: 5px;
	}
	.style img{
		width: 260px;
		height: 260px;
	}
	ul{
		height: 100px;
	
	}
</style>
